<html>
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/user_order.css">
    <style>[v-cloak]{display: none;}</style>
</head>
<body>
<div id="app" v-cloak>
    <div class="err_box layui-container" id="errBox" v-show="tipsIf" :style="{top:errorTop+'px'}">{{tipsMsg}}</div>
    <xhhead on="0" v-on:login="loginMsgPop"></xhhead>
    <Login v-show="login_if" :login_type="login_num" v-on:close="login_close" v-on:tip="son_tip" ></Login>
    <Password v-on:tip="son_tip" v-show="password_if" v-on:close="pws_close" ></Password>

    <div  class="user_order">
        <div class="box_shadow disFlex layui-container no_pad">
            <div class="user_part">
                <div class="user_info">
                    <p class="red">18080153537</p>
                    <p>积分：3500</p>
                </div>
                <ul class="order_nav">
                    <li v-for="(a,i) in user_nav" @click="typeBtn(i)" :class="{on:user_nav_on==i}">
                        <div>{{a.item}}</div>
                    </li>
                </ul>
            </div>
            <div class="user_table auto " v-show="type==0">
                <!--订单列表-->
                <div class="order_total" v-show="order_list==1">
                    <ul class="user_head">
                        <li>预约时间</li>
                        <li>号码</li>
                        <li>订单信息</li>
                        <li>价格</li>
                        <li>订单状态</li>
                        <li>相关操作</li>
                    </ul>
                    <ul class="">
                        <li class="order_item" v-for="i in 5">
                            <div class="time">2019-6-12</div>
                            <div class="number_span">
                                <span>139</span> <span>1010</span> <span>2959</span>
                            </div>
                            <div class="info">
                                <p><em>归属地：</em>成都 </p>
                                <p><em>运营商：</em>移动</p>
                            </div>
                            <div class="price">￥ 100 （含话费40元）</div>
                            <div class="status">
                                待核对
                            </div>
                            <div class="btn_box">
                                <div class="btn" v-if="i==0">取消订单</div>
                                <div class="btn" v-elseif="i==2" @click="payOrderbBtn">去支付</div>
                                <div class="btn" v-elseif="i==4" @click="completeOrderbBtn">去完善</div>
                                <div class="btn" v-else >取消订单</div>
                                <div class="btn on" @click="seeDtl">查看详情</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--end of 订单列表-->
                <!--支付弹窗-->
                <div class="layer pay_pop " v-show="order_pop_show">
                    <div class="layer_container">
                        <div class="close_box">
                            <img src="images/close_icon.png" class="icon_close" @click="order_pop_show=false">
                        </div>
                        <div class="title">支付</div>
                        <div class="content">
                            <p>请打开微信扫一扫功能，扫描下方二维码进行支付</p>
                            <img src="images/pay_code.png" alt="">
                        </div>
                    </div>
                </div>
                <!--end of 支付弹窗-->
                <!--支付成功弹窗-->
                <div class="layer pay_succ_pop hide ">
                    <div class="layer_container">
                        <div class="title">
                            支付成功
                        </div>
                        <div class="content">
                            根据国家实名制要求，需要完善入网信息，页面正在跳转中( <span>{{orderSuccTime}}</span> s)...
                        </div>
                    </div>
                </div>
                <!--end of 支付成功弹窗-->
                <!--订单详情-->
                <div class="order_one" v-show="order_one_if">
                    <div class="progress">
                        <ul>
                            <li class="item">
                                <div class="line"></div>
                                <p class="tip">提交预约</p>
                                <img src="images/status_on.png" alt="" class="icon_status">
                                <p class="text">2019-6-12 12:30</p>
                            </li>
                            <li class="item">
                                <div class="line"></div>
                                <p class="tip">成功核对</p>
                                <img src="images/status.png" alt="" class="icon_status">
                            </li>
                            <li class="item">
                                <div class="line"></div>
                                <p class="tip">成功支付</p>
                                <img src="images/status.png" alt="" class="icon_status">
                            </li>
                            <li class="item">
                                <div class="line"></div>
                                <p class="tip">完善资料</p>
                                <img src="images/status.png" alt="" class="icon_status">
                            </li>
                            <li class="item">
                                <div class="line"></div>
                                <p class="tip">号码发货</p>
                                <img src="images/status.png" alt="" class="icon_status">
                            </li>
                            <li class="item">
                                <p class="tip">确定收货</p>
                                <img src="images/status.png" alt="" class="icon_status">
                            </li>
                        </ul>
                    </div>
                    <ul class="user_head">
                        <li>预约时间</li>
                        <li>号码</li>
                        <li>订单信息</li>
                        <li>价格</li>
                        <li>收货信息</li>
                        <li>相关操作</li>
                    </ul>
                    <ul class="">
                        <li class="order_item">
                            <div class="time">2019-6-12</div>
                            <div class="number_span">
                                <span>139</span> <span>1010</span> <span>2959</span>
                            </div>
                            <div class="info">
                                <p><em>归属地：</em>成都 </p>
                                <p><em>运营商：</em>移动</p>
                            </div>
                            <div class="price">￥ 100 （含话费40元）</div>
                            <div class="status">
                                <p class="user_info"><span>罗西</span> <span>18483223329</span></p>
                                <p>四川省成都市成华区某某路56号某某小区</p>
                            </div>
                            <div class="btn_box">
                                <div class="btn">取消订单</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--end of 订单详情-->
                <!--入网信息填写-->
                <div class="on_net " v-show="order_complete_show">
                    <div class="net_head">入网信息填写</div>
                    <div class="net_box">
                        <div class="detail_item">
                            <label>姓&emsp;&emsp;名</label>
                            <div class="inline">
                                <input type="text" placeholder="填写收货人姓名" class="item_input" v-model="user">
                            </div>
                        </div>
                        <div class="detail_item">
                            <label>身份证号</label>
                            <div class="inline">
                                <input type="text" placeholder="填写身份证号码" class="item_input" v-model="code">
                            </div>
                        </div>
                        <div class="add_one " v-show="addOneIf">
                            <div class="detail_item">
                                <label>身份证号</label>
                                <div class="inline">
                                    <div class="head_info">请按照示例图，上传对应图片</div>
                                    <div class="line_off">
                                        <ul>
                                            <li class="img_up_box">
                                                <div class="status_box">
                                                    <img src="images/status_on.png" class="icon_status" alt="">
                                                    <div class="line"></div>
                                                </div>
                                                <div class="tips1">上传身份证正面图片</div>
                                                <div>
                                                    <img src="images/sfz_z.png"  class="example_img" alt="">
                                                </div>
                                                <p class="tips2">身份证正面</p>
                                                <div class="file_box">
                                                    <div class="file_img_up" v-show="addFirstImg[0].up==0">
                                                        <img src="images/file_up.png" class="icon_file" alt="">
                                                        <p>上传图片</p>
                                                        <input type="file" class="file_input" @change="fileUp($event,'addFirstImg',0)">
                                                    </div>
                                                    <div class="file_img_show"  v-show="addFirstImg[0].up==1">
                                                        <img src="images/close_icon.png" class="icon_close" @click="addFirstImg[0].up=0" alt="">
                                                        <img :src="addFirstImg[0].img" class="img_show" alt="">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="img_up_box">
                                                <div class="status_box">
                                                    <img src="images/status_on.png" class="icon_status" alt="">
                                                    <div class="line"></div>
                                                </div>
                                                <div class="tips1">上传身份证反面图片</div>
                                                <div>
                                                    <img src="images/sfz_f.png"  class="example_img" alt="">
                                                </div>
                                                <p class="tips2">身份证反面</p>
                                                <div class="file_box">
                                                    <div class="file_img_up" v-show="addFirstImg[1].up==0">
                                                        <img src="images/file_up.png" class="icon_file" alt="">
                                                        <p>上传图片</p>
                                                        <input type="file" class="file_input" @change="fileUp($event,'addFirstImg',1)">
                                                    </div>
                                                    <div class="file_img_show"  v-show="addFirstImg[1].up==1">
                                                        <img src="images/close_icon.png" class="icon_close" @click="addFirstImg[1].up=0" alt="">
                                                        <img :src="addFirstImg[1].img" class="img_show" alt="">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="img_up_box">
                                                <div class="status_box">
                                                    <img src="images/status.png" class="icon_status" alt="">
                                                </div>
                                                <div class="tips1">上传手持身份证图片</div>
                                                <div class="person_img">
                                                    <div>
                                                        <img src="images/sfz_person.png"  class="example_person" alt="">
                                                    </div>
                                                    <div class="file_box">
                                                        <div class="file_img_up" v-show="addFirstImg[2].up==0">
                                                            <img src="images/file_up.png" class="icon_file" alt="">
                                                            <p>上传图片</p>
                                                            <input type="file" class="file_input" @change="fileUp($event,'addFirstImg',2)">
                                                        </div>
                                                        <div class="file_img_show"  v-show="addFirstImg[2].up==1">
                                                            <img src="images/close_icon.png" class="icon_close" @click="addFirstImg[2].up=0" alt="">
                                                            <img :src="addFirstImg[0].img" class="img_show" alt="">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="deal_box">
                                            <span :class="{radio:true,on:isCheck}" @click="isCheck=!isCheck"><img src="images/right.png" alt=""></span>
                                            勾选则表示你已经充分了解并完全同意 <span class="text_blue">《客户入网协议》</span>
                                        </div>
                                        <div class="order_btn btn">
                                            提交信息
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="add_more" v-show="addMoreIf">
                            <div class="detail_item">
                                <label>身份证号</label>
                                <div class="inline">
                                    <div class="line_off">
                                        <ul>
                                            <li class="card_info">
                                                <div class="card_title">2019-06-12 上传的资料</div>
                                                <div class="img_box">
                                                    <div class="item1">
                                                        <img src="images/sfz_z.png" class="card_img" alt="">
                                                        <p>身份证正面</p>
                                                        <img src="images/sfz_f.png" class="card_img" alt="">
                                                        <p>身份证反面</p>
                                                    </div>
                                                    <div class="item2">
                                                        <img src="images/sfz_person.png" class="card_up"  alt="">
                                                        <p>手持身份证</p>
                                                    </div>
                                                </div>
                                                <img src="images/right_box_icon.png" class="right_icon" alt="">
                                            </li>
                                            <li class="card_info">
                                                <div class="card_title">2019-06-12 上传的资料</div>
                                                <div class="img_box">
                                                    <div class="item1">
                                                        <img src="images/sfz_z.png" class="card_img" alt="">
                                                        <p>身份证正面</p>
                                                        <img src="images/sfz_f.png" class="card_img" alt="">
                                                        <p>身份证反面</p>
                                                    </div>
                                                    <div class="item2">
                                                        <img src="images/sfz_person.png" class="card_up"  alt="">
                                                        <p>手持身份证</p>
                                                    </div>
                                                </div>
                                                <img src="images/right_box_icon.png" class="right_icon" alt="">
                                            </li>
                                            <li class="add_info" @click="addInfoBtn">
                                                <div class="add_box pos_center">
                                                    <img src="images/add.png" class="icon_add" alt="">
                                                    <p>添加新资料</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="deal_box">
                                            <span :class="{radio:true,on:isCheck}" @click="isCheck=!isCheck"><img src="images/right.png" alt=""></span>
                                            勾选则表示你已经充分了解并完全同意 <span class="text_blue">《客户入网协议》</span>
                                        </div>
                                        <div class="order_btn btn">
                                            提交信息
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end of 入网信息填写-->
            </div>
            <!--入网资料管理-->
            <div class="net_manage" v-show="type==2">
                <div class="net_head">已保存的入网资料</div>
                <ul class="net_img_box">
                    <li>
                        <div class="card_info">
                            <div class="card_title">2019-06-12 上传的资料</div>
                            <div class="img_box">
                                <div class="item1">
                                    <img src="images/sfz_z.png" class="card_img" alt="">
                                    <p>身份证正面</p>
                                    <img src="images/sfz_f.png" class="card_img" alt="">
                                    <p>身份证反面</p>
                                </div>
                                <div class="item2">
                                    <img src="images/sfz_person.png" class="card_up"  alt="">
                                    <p>手持身份证</p>
                                </div>
                            </div>
                            <img src="images/right_box_icon.png" class="right_icon" alt="">
                        </div>
                        <div class="btn_box">
                            <span class="text">已设为默认</span>
                            <span class="btn">删除</span>
                        </div>
                    </li>
                    <li>
                        <div class="card_info">
                            <div class="card_title">2019-06-12 上传的资料</div>
                            <div class="img_box">
                                <div class="item1">
                                    <img src="images/sfz_z.png" class="card_img" alt="">
                                    <p>身份证正面</p>
                                    <img src="images/sfz_f.png" class="card_img" alt="">
                                    <p>身份证反面</p>
                                </div>
                                <div class="item2">
                                    <img src="images/sfz_person.png" class="card_up"  alt="">
                                    <p>手持身份证</p>
                                </div>
                            </div>
                            <img src="images/right_box_icon.png" class="right_icon" alt="">
                        </div>
                        <div class="btn_box">
                            <span class="btn on">设为默认</span>
                            <span class="btn">删除</span>
                        </div>
                    </li>
                    <li style=""></li>
                </ul>
                <div class="net_head mt20">添加新的入网资料</div>
                <div class="net_box">
                    <div class="detail_item">
                        <label>姓&emsp;&emsp;名</label>
                        <div class="inline">
                            <input type="text" placeholder="填写收货人姓名" class="item_input" v-model="user">
                        </div>
                    </div>
                    <div class="detail_item">
                        <label>身份证号</label>
                        <div class="inline">
                            <input type="text" placeholder="填写身份证号码" class="item_input" v-model="code">
                        </div>
                    </div>
                    <div class="add_one ">
                        <div class="detail_item">
                            <label>身份证号</label>
                            <div class="inline">
                                <div class="head_info">请按照示例图，上传对应图片</div>
                                <div class="line_off">
                                    <ul>
                                        <li class="img_up_box">
                                            <div class="status_box">
                                                <img src="images/status_on.png" class="icon_status" alt="">
                                                <div class="line"></div>
                                            </div>
                                            <div class="tips1">上传身份证正面图片</div>
                                            <div>
                                                <img src="images/sfz_z.png"  class="example_img" alt="">
                                            </div>
                                            <p class="tips2">身份证正面</p>
                                            <div class="file_box">
                                                <div class="file_img_up" v-show="addFirstImg[0].up==0">
                                                    <img src="images/file_up.png" class="icon_file" alt="">
                                                    <p>上传图片</p>
                                                    <input type="file" class="file_input" @change="fileUp($event,'addFirstImg',0)">
                                                </div>
                                                <div class="file_img_show"  v-show="addFirstImg[0].up==1">
                                                    <img src="images/close_icon.png" class="icon_close" @click="addFirstImg[0].up=0" alt="">
                                                    <img :src="addFirstImg[0].img" class="img_show" alt="">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="img_up_box">
                                            <div class="status_box">
                                                <img src="images/status_on.png" class="icon_status" alt="">
                                                <div class="line"></div>
                                            </div>
                                            <div class="tips1">上传身份证反面图片</div>
                                            <div>
                                                <img src="images/sfz_f.png"  class="example_img" alt="">
                                            </div>
                                            <p class="tips2">身份证反面</p>
                                            <div class="file_box">
                                                <div class="file_img_up" v-show="addFirstImg[0].up==0">
                                                    <img src="images/file_up.png" class="icon_file" alt="">
                                                    <p>上传图片</p>
                                                    <input type="file" class="file_input" @change="fileUp($event,'addFirstImg',0)">
                                                </div>
                                                <div class="file_img_show"  v-show="addFirstImg[0].up==1">
                                                    <img src="images/close_icon.png" class="icon_close" @click="addFirstImg[0].up=0" alt="">
                                                    <img :src="addFirstImg[0].img" class="img_show" alt="">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="img_up_box">
                                            <div class="status_box">
                                                <img src="images/status.png" class="icon_status" alt="">
                                            </div>
                                            <div class="tips1">上传手持身份证图片</div>
                                            <div class="person_img">
                                                <div>
                                                    <img src="images/sfz_person.png"  class="example_person" alt="">
                                                </div>
                                                <div class="file_box">
                                                    <div class="file_img_up" v-show="addFirstImg[2].up==0">
                                                        <img src="images/file_up.png" class="icon_file" alt="">
                                                        <p>上传图片</p>
                                                        <input type="file" class="file_input" @change="fileUp($event,'addFirstImg',2)">
                                                    </div>
                                                    <div class="file_img_show"  v-show="addFirstImg[2].up==1">
                                                        <img src="images/close_icon.png" class="icon_close" @click="addFirstImg[2].up=0" alt="">
                                                        <img :src="addFirstImg[0].img" class="img_show" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="deal_box">
                                        <span :class="{radio:true,on:isCheck}" @click="isCheck=!isCheck"><img src="images/right.png" alt=""></span>
                                        勾选则表示你已经充分了解并完全同意 <span class="text_blue">《客户入网协议》</span>
                                    </div>
                                    <div class="order_btn btn">
                                        提交信息
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of 入网资料管理-->
            <!--收货地址管理-->
            <div class="address" v-show="type==3">
                <div class="area_head">已保存的收货地址</div>
                <div class="area_box">
                    <div class="area_item" v-for="(a,i) in area_list">
                        <div class="area_info">
                            <p class="item1">
                                <span>{{a.user}}</span> <span>{{a.number}}</span>
                            </p>
                            <p class="item2">
                                {{a.region}}
                            </p>
                            <img src="images/right_box_icon.png" alt="" class="right_icon" v-show="a.on==1">
                        </div>
                        <div class="btn_box">
                            <span class="text" v-if="a.on==1">已设置为默认</span>
                            <span class="btn on" v-if="a.on==0">设为默认</span>
                            <span class="btn">删除</span>
                        </div>
                    </div>
                </div>
                <div class="area_head">添加新的收货地址</div>
                <div class="add_region">
                    <div class="detail_item">
                        <label>姓&emsp;&emsp;名</label>
                        <div class="inline">
                            <input type="text" placeholder="填写收货人姓名" class="item_input" v-model="user">
                        </div>
                    </div>
                    <div class="detail_item">
                        <label>联系电话</label>
                        <div class="inline">
                            <div class="code_box">
                                <input type="text" placeholder="填写手机号" class="item_input" v-model="mobile">
                                <span class="code_btn" @click="getCode">{{codeMsg}}</span>
                            </div>
                            <input type="text" placeholder="填写验证码" class="item_input" v-model="code">
                        </div>
                    </div>
                    <div class="detail_item">
                        <label>收货地址</label>
                        <div class="inline">
                            <div class="select_box">
                                <select>
                                    <option value="">请选择所在地区</option>
                                </select>
                            </div>
                            <input type="text" placeholder="填写详细地址" class="item_input">
                        </div>
                    </div>
                </div>
                <div class="mt20 save_box">
                    <div class="btn order_btn">保存</div>
                </div>
            </div>
            <!--end of 收货地址管理-->
        </div>

    </div>

    <xhfooter></xhfooter>
</div>


<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/components.js"></script>
<script src="foot.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            tipsMsg:"提示信息",
            tipsIf:false,
            errorTop:0,

            login_num:1,
            login_if:false,

            type:2,
            user_nav:[{item:"我的订单"},{item:"修改密码"},{item:"入网资料管理"},{item:"收货地址管理"}],
            user_nav_on:0,
            area_list:[
                {user:"罗西",number:"18483223321",region:"四川省成都市成华区驷马桥49号金卡小区",on:1},
                {user:"罗西",number:"18483223321",region:"四川省成都市成华区驷马桥49号金卡小区",on:0},
                {user:"罗西",number:"18483223321",region:"四川省成都市成华区驷马桥49号金卡小区",on:0},
            ],

            code:"",
            codeIf:true,
            codeTime:60,
            codeInter:"",
            codeMsg:"获取验证码",
            user:"",
            mobile:"",
            orderSuccTime:3,
            addFirstImg:[{img:"images/img_s.png",up:0},{img:"",up:0},{img:"",up:0}],
            isCheck:true,
            addMoreIf:true,
            addOneIf:false,
            addNetType:2, //1 第一次填写 2 多次填写
            order_one_if:false,
            order_list:true,
            password_if:false,

            order_pop_show:false,
            order_complete_show:false
        },
        methods:{
            payOrderbBtn:function(){
                this.order_pop_show=true;
            },
            completeOrderbBtn:function(){
              this.order_complete_show=true;
              this.order_list=0;
              this.order_one_if=true;
            },
            loginMsgPop:function(data){
                //data 1 登陆 2注册
               this.login_if=true,this.login_num=data;
            },
            login_close:function(data){this.login_if=data},
            //编辑单个地址
            addInfoBtn:function () {this.addMoreIf=false; this.addOneIf=true;},
            //提示子组件错误信息
            son_tip:function (data) {this.tips_show(data.msg)},
            //提示错误信息
            tips_show:function (msg) {
                this.tipsMsg=msg;this.tipsIf=true;
                var that = this;that.errorTop=-40;
                var msgInter=setInterval(function () {
                    that.errorTop=that.errorTop<0?(that.errorTop+2):0;
                    if(that.errorTop>0){clearInterval(msgInter)}
                },10)
                setTimeout(function () {that.tipsIf=false;},2000)
            },
            //关闭修改密码弹窗
            pws_close:function (data) {
                this.password_if = data; this.type=0;
            },
            //查看订单详情
            seeDtl:function () {
                this.order_one_if=true;
                this.order_list=false;
            },
            //上传文件
            fileUp:function (file,field,index) {
                var that=this;
                var reader = new FileReader();
                reader.onload = function(evt){
                    var result=evt.target.result;
                    console.log("result",result,field,index)
                    that[field][index].img=result;
                    that[field][index].up=1;
                    return true;
                    $.ajax({
                        url:"/index.php/api/Api/upload ",
                        type:"post",
                        data:{img:result},
                        dataType:'json',
                        success:function(res){
                            console.log("img",res.data.img_url)
                            if(res.code==200){
                                that.imgList[index].item=res.data.img_url;
                                that.imgList[index].fileUp=false;
                                var imgList=that.imgList
                                var len=imgList.length;
                                console.log("len",len)
                                if(len>1){
                                    statusChange(4)
                                }
                                var isUp=false;
                                for(var i=0;i<len;i++){
                                    if(imgList[i].fileUp){isUp=true; break;}
                                }
                                if(!isUp)imgList.push({item:"",fileUp:true});
                            }
                        }
                    })
                }
                reader.readAsDataURL(file.target.files[0]);
            },
            //左侧菜单切换
            typeBtn:function (i) {
                this.user_nav_on=i;
                if(i==0){
                    this.order_list=true;
                    this.order_one_if=false;
                    this.type=0
                }else if(i==1){
                    this.password_if=true
                }else{
                    this.type=i;
                }
            },
            //获取验证码
            getCode:function () {
                if(this.codeIf){
                    this.codeIf=false;
                    var that =this
                    this.codeInter=setInterval(function () {
                        that.codeTime = that.codeTime - 1;
                        if(that.codeTime>=0){
                            that.codeMsg=that.codeTime+"s重新获取";
                        }else{
                            that.codeMsg="重新获取";
                            that.codeTime=60;
                            that.codeIf=true;
                            clearInterval(that.codeInter);
                        }
                    },1000)
                }
            },
        },
        created:function () {
            var type = urlParams().type;
            if(type){
                this.user_nav_on=type
                this.type=type;
            }
        },
        mounted:function () {
            
        }
    })
</script>
</body>
</html>